<template>
    <div class='About' v-loading="loading" 
    element-loading-background="rgba(255, 255, 255, 0.2)" element-loading-text="加载中...">
        <el-descriptions title="信息" :column="3">
            <template #title>
                <span style="margin-right: 20px;">信息</span>
                <el-button :loading="loading" @click="refresh" type="success" size="mini">刷新</el-button>
            </template>
            <el-descriptions-item label="Redis 服务器版本:">
                <el-tag size="small">{{info.redis_version}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="宿主操作系统:">{{info.os}}</el-descriptions-item>
            <el-descriptions-item label="架构:">{{info.arch_bits}}位</el-descriptions-item>

            <el-descriptions-item label="已连接客户端的数量:">{{info.connected_clients }}</el-descriptions-item>
            <el-descriptions-item label="服务器进程的PID:">{{info.process_id}}</el-descriptions-item>
            <el-descriptions-item label="分配的内存总量:">{{info.used_memory_human }}</el-descriptions-item>
        </el-descriptions>
        <div class="scro">
            <el-scrollbar native>
                <el-table :data="infoList" style="width: 100%">
                    <el-table-column prop="key" label="全部信息">
                    </el-table-column>
                    <el-table-column prop="value" label="值">
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </div>

    </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue';
import { info } from '@/api/db';
export default defineComponent({
    name: 'About',
    components: {},
    setup(omprops, content) {
        const state = reactive({
            loading: false,
            info: {},
            infoList: []
        })
        return toRefs(state)
    },
    props: {},
    computed: {},
    watch: {},
    mounted() {
        this.refresh()
    }, // 组件挂载完成后执行的函数。
    methods: {
        refresh() {
            this.loading = true
            info().then((res) => {
                this.loading = false
                this.data = res.data
                var arr = this.data.split("\r\n")
                this.infoList = []
                for (let i = 0; i < arr.length; i++) {
                    const element = arr[i];
                    var item = element.split(":")
                    if (item.length == 2) {
                        this.info[item[0]] = item[1]
                        this.infoList.push({
                            key: item[0],
                            value: item[1]
                        })
                    }
                }
            })
        }
    },
})
</script>

<style scoped lang="less">
.About {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.scro {
    flex: 1;
    overflow: hidden;
}
</style>